<template>
	<tm-app color="#EFEFEF">
		<navbar-module title="喂食工单"></navbar-module>

		<tabs-module :list="tabsTitle" @tabschange="tabschange"/>

		<view v-if="itemData.length>0" class="firstDom">
		    <view v-if="state === '0'" class="listDom">
				<tm-scrolly :refresher='false' v-model="pull" v-model:bottom-value="bottomFresh" @refresh="refresh" @bottom="refreshBottom" _style="height:100%">
					<no-work-list-item :data="{}" v-for="item in itemData" :key="item.code" :url="`/pages/feed/form/form?data=${encodeURIComponent(JSON.stringify(item))}`" label="喂食" :code="item.content?.combo.name" icon="tmicon-ios-leaf">
						<view v-if="item.content?.affix.length>0" class="flex flex-row text flex-row-center-start">
							<tm-text color="red" :fontSize="32">零食：</tm-text>
							<view class="flex">
								<tm-text color="red" :fontSize="32" v-for="(lVal,li) in item.content?.affix" :key="li">{{lVal?.name}},</tm-text>
							</view>
						</view>
						<tm-text :label="`猪仔数量：${item.pigDetail?.length} 头`" class="text" :fontSize="32"/>
						<tm-text :label="`所属猪圈：${item.pigsty?.name}`" class="text" :fontSize="32"/>
						<tm-text :label="`创建时间：${item.createTime}`" class="text text-border" color="#999" :font-size="28"/>
					</no-work-list-item>
				</tm-scrolly>
		    </view>


		    <view v-if="state === '1'" class="listDom">
				<tm-scrolly :refresher='false' v-model="pull" v-model:bottom-value="bottomFresh" @refresh="refresh" @bottom="refreshBottom" _style="height:100%;">
					<was-work-list-item :data="{}" :url="`/pages/feed/details/details?data=${encodeURIComponent(JSON.stringify(item))}`" v-for="item in itemData" :key="item.code" :code="item.content?.combo.name" icon="tmicon-ios-leaf">
						   <tm-text :label="`猪仔数量：${item.pigDetail?.length}`" class="text" :fontSize="32"/>
						   <view v-if="item.content?.affix.length>0" class="flex flex-row text flex-row-center-start">
						   	<tm-text color="red" :fontSize="32">零食：</tm-text>
						   	<view class="flex">
						   		<tm-text color="red" :fontSize="32" v-for="(lVal,li) in item.content?.affix" :key="li">{{lVal?.name}},</tm-text>
						   	</view>
						   </view>
						   <tm-text :label="`所属猪圈：${item.pigsty?.name}`" class="text" :fontSize="32"/>
							<tm-text :label="`完成时间：${item.completeTime}`" class="text text-border" color="#999" :font-size="28"/>
					</was-work-list-item>
				</tm-scrolly>
		    </view>
		</view>
		<view v-else>
			<no-data :flag="loadFlag"></no-data>
		</view>
	</tm-app>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	import {getOneWorkOderFoods,getFoodOder} from '../../index/resource/http'

	const state = ref('0')
	const loadFlag = ref(false)

	
	const params = {pageNo:1,pageSize:10,}
	const bottomFresh = ref(false)
	const pull = ref(false)
	const bottomFlag = ref(false)

	onShow(()=>{
		loadFlag.value = false
		getData()
	})

	const tabsTitle = [
		{ key: '0', title: '未完成', icon: 'tmicon-ios-leaf' },
		{ key: '1', title: '已完成', icon: 'tmicon-ios-rocket' },
	]

	const itemData = ref([])

	const getData = async ()=>{
		itemData.value = []
		params.pageNo = 1
		
		let res = null
		if(state.value === '0'){
			 res = await getOneWorkOderFoods('L3',params)
		} else if(state.value === '1'){
			 res = await getFoodOder(params)
		}
		itemData.value = res.data.records
		bottomFlag.value = res.data.hasNext
		
		// 处理零食字段
		itemData.value.forEach(item=>{
			item.tuck = ''
			item.content.affix.forEach((val,index)=>{
				item.tuck += val.name+'  '
			})
		})
		loadFlag.value = true
	}

	const tabschange=(key) => {
		loadFlag.value = false
		state.value = key
		getData()
	}


    const refreshBottom = async () => {
		if(bottomFlag.value){
			bottomFresh.value = true
			params.pageNo++
			let res = null
			if(state.value === '0'){
			    res = await getOneWorkOderFoods('L3',params)
			}else if(state.value === '1'){
				res = await getFoodOder(params)
			}
			itemData.value.push(...res.data.records)
			bottomFresh.value = false
			bottomFlag.value = res.data.hasNext
		}
	}
	
	const refresh = async () => {
		setTimeout(()=>{
			pull.value = false
		})
	}

</script>

<style>
	.firstDom{
		height:100%;
		flex:1;
		position: relative;
		display: flex;
	}
	.listDom{
		position: absolute;
		top:0;
		bottom:0;
		width: 100%;
	}
</style>
